<template>
    <div>
        <Card>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: left;">
                    <ButtonGroup shape="circle" size="small">
                        <Button @click="addAction">新增</Button>
                        <Button @click="refreshAction">刷新</Button>
                    </ButtonGroup>
                </div>
                <div style="float: right;">
                    <Page :total="totalCount" :current="pageIndex" :page-size="pageSize" @on-change="onChangePage" size="small" show-total show-elevator></Page>
                </div>
            </div>
            <Table :data="tableData" :columns="columns" :loading="loading" size="small" :stripe="stripe"></Table>
        </Card>

        <Modal
                :title="modalTitle"
                v-model="editModalShow"
                :mask-closable="false"
                :closable="false"
                :footer-hide="true"
                scrollable
                class-name="vertical-center-modal">
            <Form ref="editForm" :model="formData" label-position="right" :rules="formValidateRule" :label-width="100">
                <input v-model="formData.roleId" name="roleId" type="hidden">
                <FormItem label="角色名称" prop="roleName">
                    <Input v-model="formData.roleName" name="roleName" placeholder="角色名称" />
                </FormItem>
                <FormItem label="角色描述">
                    <Input v-model="formData.roleDescription" name="roleDescription" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="角色描述" />
                </FormItem>
                <FormItem>
                    <div style="float: right;">
                        <Button style="margin-right: 10px" @click="formCancelHandle">取消</Button>
                        <Button type="primary" @click="formSaveHandle">保存</Button>
                    </div>
                </FormItem>
            </Form>
        </Modal>

        <Modal
                :title="authoriseModalTitle"
                v-model="authoriseModal"
                :mask-closable="false"
                :closable="true"
                :footer-hide="true"
                width="760"
                scrollable
                class-name="vertical-center-modal">
            <Layout>
                <Sider hide-trigger :style="{background: '#fff', width: '260px', maxWidth: '220px', flex: '0 0 220px'}">
                    <Card title="应用" icon="md-apps" :padding="5" shadow style="width: 210px; margin:0px 5px;">
                        <CellGroup @on-click="onclientSelected">
                            <Cell v-for='(client, index) in clients' :title='client.clientName' :selected='client.selected' :name="index" />
                        </CellGroup>
                    </Card>
                </Sider>
                <Content :style="{padding: '0px', minHeight: '280px', background: '#fff'}">
                    <Card :title="authoriseContextTitle" icon="md-apps" :padding="5" shadow style="margin:0px 5px;">
                        <div style="float: right;"  slot="extra">
                            <ButtonGroup>
                                <Button type="primary" @click="saveAuthoriseHandle">保存选中应用授权项</Button>
                            </ButtonGroup>
                        </div>
                        <Tree ref="authoriseTree" :data="treeNodes" :render="renderTreeNode"  show-checkbox></Tree>
                    </Card>
                </Content>
            </Layout>
        </Modal>
    </div>
</template>
